import React, { Component } from "react";
import { Form, InputNumber, Select, Radio, Row, Col, DatePicker } from "antd";
import moment from "moment";
import styles from "./BottomInfo.less";

const { Group } = Radio;
const { Option } = Select;
const { RangePicker } = DatePicker;

@Form.create()
class BottomInfo extends Component {
  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      }
    };
    // const { channelList = [] } = this.props;
    return (
      <div className={styles.root}>
        <Form>
          <span className={styles.basic}>策略配置</span>
          {/* <Row>
            <Col
              span={8}
              style={{
                display: "flex",
                justifyContent: "flex-end",
                color: "rgba(0,0,0,0.85)"
              }}
            >
              重发规则：
            </Col>
            <Col span={16} style={{ width: 466 }}>
              <Group onChange={this.props.getRule} value={this.props.ruleType}>
                <Radio value={1} style={{ marginBottom: 16 }}>
                  消息分发失败同渠道重发一次
                </Radio>
                <Radio value={2}>
                  消息分发失败在
                  <Select
                    style={{ width: 241, marginLeft: 10, marginRight: 10 }}
                    placeholder="请选择渠道名称"
                    disabled={this.props.ruleDisable}
                    onChange={this.props.getChannel}
                    value={this.props.ruleChannel}
                  >
                    {channelList.map(item => (
                      <Select.Option
                        value={item.pushChannelId * 1}
                        key={item.pushChannelId}
                      >
                        {item.description}
                      </Select.Option>
                    ))}
                  </Select>
                  渠道重发一次
                </Radio>
              </Group>
            </Col>
          </Row> */}
          <Row style={{ marginTop: 24, width: 800 }}>
            <Col
              span={4}
              style={{
                display: "flex",
                justifyContent: "flex-end",
                color: "rgba(0,0,0,0.85)"
              }}
            >
              发送失败重试次数：
            </Col>
            <Col span={16} style={{ width: 466, marginTop: -5, fontSize: 14 }}>
              <InputNumber
                onChange={this.props.failureResendTimesChange}
                value={this.props.failureResendTimes}
                max={99999}
                min={1}
                style={{ width: 170, marginLeft: 24 }}
                placeholder="请输入"
              />
            </Col>
          </Row>
          <Row style={{ marginTop: 24, width: 800 }}>
            <Col
              span={4}
              style={{
                display: "flex",
                justifyContent: "flex-end",
                color: "rgba(0,0,0,0.85)"
              }}
            >
              重试间隔时长：
            </Col>
            <Col span={16} style={{ width: 466, marginTop: -5, fontSize: 14 }}>
              <InputNumber
                onChange={this.props.failureResendIntervalChange}
                value={this.props.failureResendInterval}
                max={99999}
                min={1}
                style={{ width: 170, margin: "0 24px" }}
                placeholder="请输入"
              />
              <span>分</span>
            </Col>
          </Row>
          <Row style={{ marginTop: 24, width: 800 }}>
            <Col
              span={4}
              style={{
                display: "flex",
                justifyContent: "flex-end",
                color: "rgba(0,0,0,0.85)"
              }}
            >
              流量控制：
            </Col>
            <Col span={16} style={{ width: 466, marginTop: -5, fontSize: 14 }}>
              <div>
                <div style={{ marginBottom: 10 }}>
                  限制时间单位
                  <Select
                    style={{ width: 170, marginLeft: 46 }}
                    defaultValue={1}
                    onChange={this.props.getTimeCategory}
                    value={this.props.category}
                  >
                    <Option value={1}>分钟</Option>
                    <Option value={2}>小时</Option>
                    <Option value={3}>天</Option>
                  </Select>
                </div>
                <div>
                  API最大调用次数
                  <InputNumber
                    onChange={this.props.getNumber}
                    value={this.props.num}
                    max={99999}
                    min={1}
                    style={{ width: 170, marginLeft: 24 }}
                    placeholder="请输入数字"
                  />
                </div>
              </div>
            </Col>
          </Row>
          <div
            className={this.props.radioVisible ? styles.notsel : styles.sel}
            style={{ width: 800 }}
          >
            <Form.Item
              {...formItemLayout}
              label="消息源有效期"
              style={{ marginTop: 8 }}
            >
              {getFieldDecorator("workTime", {
                rules: [
                  {
                    required: true,
                    message: "请选择消息源有效期"
                  }
                ],
                initialValue: "1"
              })(
                <div>
                  <Group
                    style={{ width: 466, marginTop: 10 }}
                    onChange={this.props.getWorkTimeType}
                    value={this.props.workTime}
                  >
                    <Radio value={1}>不限</Radio>
                    <Radio value={2}>一年有效</Radio>
                    <Radio value={3}>一月有效</Radio>
                    <Radio value={4}>一周有效</Radio>
                    <Radio value={5}>当天有效</Radio>
                    <Radio value={6}>
                      自定义
                      <RangePicker
                        showTime
                        className={
                          this.props.timeVisible
                            ? styles.notselDate
                            : styles.selDate
                        }
                        style={{ width: 244, marginLeft: 10, marginTop: 10 }}
                        disabled={this.props.workDisable}
                        onChange={this.props.getWorkTime}
                        value={
                          this.props.workTime === 6 &&
                          this.props.startTime !== ""
                            ? [
                                moment(
                                  this.props.startTime,
                                  "YYYY-MM-DD HH:mm:ss"
                                ),
                                moment(
                                  this.props.endTime,
                                  "YYYY-MM-DD HH:mm:ss"
                                )
                              ]
                            : [null, null]
                        }
                      />
                    </Radio>
                  </Group>
                </div>
              )}
              <div>
                {this.props.timeVisible ? (
                  <div style={{ marginLeft: "33.33333%", color: "#f5222d" }}>
                    自定义时间不能为空
                  </div>
                ) : null}
                {this.props.radioVisible ? (
                  <div style={{ marginLeft: "33.33333%", color: "#f5222d" }}>
                    请选择有效期
                  </div>
                ) : null}
              </div>
            </Form.Item>
          </div>
        </Form>
      </div>
    );
  }
}

export default BottomInfo;
